<template>
  <div class="mod-prod-brand">
    <div class="search-bar">

      <el-form :inline="true" class="search-form" size="small">
        <div class="input-row">
          <el-form-item :label="$t('chatMsg.groupName')" prop="name">
            <el-input v-model="searchParam.name" :placeholder="$t('chatMsg.keyupGroupName')" maxlength="30" clearable/>
          </el-form-item>

          <el-form-item prop="type" label="申请方">
            <el-select v-model="searchParam.type" clearable>
              <el-option label="用户" :value="0"></el-option>
              <el-option label="商家" :value="1"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item prop="isOfficial" label="是否官方群">
            <el-select v-model="searchParam.isOfficial" clearable>
              <el-option label="否" :value="0"></el-option>
              <el-option label="是" :value="1"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item prop="status" label="状态">
            <el-select v-model="searchParam.status" clearable>
              <el-option label="待处理" :value="0"></el-option>
              <el-option label="驳回" :value="1"></el-option>
              <el-option label="创建失败" :value="2"></el-option>
              <el-option label="创建成功" :value="3"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <div class="default-btn primary-btn" @click="searchChange()">搜索</div>
            <div class="default-btn" @click="resetSearchForm()">重置</div>
          </el-form-item>
        </div>
      </el-form>

    </div>

    <div class="main-container">
      <div class="table-con spec-table">
        <el-table
          ref="specListTable"
          :data="dataList"
          header-cell-class-name="table-header"
          row-class-name="table-row"
          :highlight-current-row="true"
          style="width: 100%">

          <el-table-column
            prop="name"
            :label="$t('chatMsg.groupName')"
          >
          </el-table-column>

          <el-table-column
            prop="pic"
            :label="$t('chatMsg.pic')"
          >
            <template slot-scope="scope">
              <div class="table-cell-con">
                <div class="table-cell-image">
                  <el-image v-if="scope.row.pic" :src="resourcesUrl + scope.row.pic" :preview-src-list="[resourcesUrl + scope.row.pic]" />
                </div>
              </div>
            </template>
          </el-table-column>

          <el-table-column
            prop="isOfficial"
            label="是否官方群"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.isOfficial === 0">否</span>
              <span v-else-if="scope.row.isOfficial === 1">是</span>
            </template>
          </el-table-column>

          <el-table-column
            prop="type"
            label="申请方"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.type === 0">用户</span>
              <span v-else-if="scope.row.type === 1">商家</span>
            </template>
          </el-table-column>

          <el-table-column
            prop="shopName"
            label="店铺名称"
          >
          </el-table-column>

          <el-table-column
            prop="objName"
            label="申请者"
          >
          </el-table-column>

          <el-table-column
            prop="status"
            label="状态"
          >
            <template slot-scope="scope">
              <el-tag type="primary" v-if="scope.row.status === 0">待处理</el-tag>
              <el-tag type="warning" v-else-if="scope.row.status === 1">驳回</el-tag>
              <el-tag type="danger" v-else-if="scope.row.status === 2">创建失败</el-tag>
              <el-tag type="success" v-else-if="scope.row.status === 3">创建成功</el-tag>
            </template>
          </el-table-column>

          <el-table-column
            prop="months"
            label="套餐月数"
          >
            <template slot-scope="scope">
              <div class="table-cell-text">{{ scope.row.cost.months }}</div>
            </template>
          </el-table-column>

          <el-table-column
            prop="energyValue"
            label="能量值"
          >
            <template slot-scope="scope">
              <div class="table-cell-text">{{ scope.row.cost.energyValue }}</div>
            </template>
          </el-table-column>

          <el-table-column
            prop="isRenew"
            label="是否连续包月"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.cost.isRenew === 0">否</span>
              <span v-else-if="scope.row.cost.isRenew === 1">是</span>
            </template>
          </el-table-column>

          <el-table-column
            prop="renewValue"
            label="连续包月能量值"
          >
            <template slot-scope="scope">
              <div class="table-cell-text">{{ scope.row.cost.renewValue }}</div>
            </template>
          </el-table-column>

          <el-table-column
            prop="remark"
            label="资费备注"
          >
            <template slot-scope="scope">
              <div class="table-cell-text">{{ scope.row.cost.remark }}</div>
            </template>
          </el-table-column>

          <el-table-column
            prop="createTime"
            label="申请时间"
          >
          </el-table-column>

          <el-table-column
            align="center"
            :label="$t('publics.operating')"
          >
            <template slot-scope="scope">
              <div class="text-btn-con">

                <div v-if="scope.row.status == 0"
                  class="default-btn text-btn"
                  @click="ultraGroupAudit(scope.row)"
                >审核
                </div>

                <div
                  class="default-btn text-btn"
                  @click="ultraGroupRecord(scope.row)"
                >记录
                </div>

              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination
        v-if="dataList.length"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total">
      </el-pagination>
    </div>

    <el-dialog title="处理" :visible.sync="dialogAuditVisible" center width="30%" :close-on-click-modal="false" >
      <div style="display: flex;flex-direction: column;align-items: center;justify-content: center;">
        <el-input v-model="reason" placeholder="请输入审核意见"  maxlength="70"  clearable></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogAuditVisible = false">取消</el-button>
        <el-button @click="submitAudit(0)">通过</el-button>
        <el-button type="primary" @click="submitAudit(1)">驳回</el-button>
      </span>
    </el-dialog>

    <el-dialog title="记录" :visible.sync="dialogRecordVisible" center width="50%" :close-on-click-modal="false" >
      <div class="main-container">
        <div class="table-con spec-table">
          <el-table
            :data="recordList"
            tooltip-effect="dark"
            stripe
            :header-cell-style="{background: 'rgba(237,237,237,0.33)'}"
            style="width: 100%"
          >
            <el-table-column
              prop="name"
              label="群名称"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="pic"
              :label="$t('chatMsg.pic')"
              align="center"
            >
              <template slot-scope="scope">
                <div class="table-cell-con" style="justify-content: center">
                  <div class="table-cell-image">
                    <el-image v-if="scope.row.pic" :src="resourcesUrl + scope.row.pic" />
                  </div>
                </div>
              </template>
            </el-table-column>

            <el-table-column
              align="center"
              prop="isOfficial"
              label="是否官方群"
            >
              <template slot-scope="scope">
                <span v-if="scope.row.isOfficial === 0">否</span>
                <span v-else-if="scope.row.isOfficial === 1">是</span>
              </template>
            </el-table-column>

            <el-table-column
              align="center"
              prop="status"
              label="状态"
            >
              <template slot-scope="scope">
                <span v-if="scope.row.status === 0">通过</span>
                <span v-else-if="scope.row.status === 1">驳回</span>
                <span v-else-if="scope.row.status === 2">创建失败</span>
                <span v-else-if="scope.row.status === 3">续费失败</span>
                <span v-else-if="scope.row.status === 4">续费成功</span>
              </template>
            </el-table-column>

            <el-table-column
              align="center"
              prop="reason"
              label="原因"
            >
            </el-table-column>

            <el-table-column
              align="center"
              prop="createTime"
              label="时间"
            >
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-dialog>


  </div>
</template>

<script>
  export default {
    components: {
    },
    data () {
      return {
        resourcesUrl: process.env.VUE_APP_RESOURCES_URL,
        dataList: [],
        recordList: [],
        dataListLoading: false,
        addOrUpdateVisible: false,
        dialogAuditVisible: false,
        dialogRecordVisible: false,
        auditData: null,
        searchParam: {},
        reason: '',
        page: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 10
        }
      }
    },
    created () {
      this.getDataList(this.page)
    },
    methods: {
      getDataList (page, newData = false) {
        if (this.page) {
          let size = Math.ceil(this.page.total / this.page.pageSize)
          this.page.currentPage = (this.page.currentPage > size ? size : this.page.currentPage) || 1
        }
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/admin/ultra/group/apply/page'),
          method: 'get',
          params: this.$http.adornParams(
            Object.assign(
              {
                current: page == null ? this.page.currentPage : page.currentPage,
                size: page == null ? this.page.pageSize : page.pageSize
              },
              this.searchParam
            )
          )
        }).then((data) => {
          if (data) {
            this.dataList = data.data.records
            this.page.total = data.data.total
          }
          this.dataListLoading = false
        })
      },
      ultraGroupAudit (row) {
        this.reason = ''
        this.auditData = row
        this.dialogAuditVisible = true
      },
      submitAudit (status) {
        let title = '确定通过？将扣减申请方能量值，并创建该超级群。'
        if (status == 1) {
          title = '确定驳回该超级群申请？'
          if (!this.reason) {
            this.$message.error('驳回时审核意见不能为空！')
            return
          }
        }
        this.$confirm(title, this.$i18n.t('text.tips'), {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl('/admin/ultra/group/apply/audit'),
            method: 'post',
            data: this.$http.adornData(
              {
                groupApplyId: this.auditData.id,
                status: status,
                reason: this.reason
              }
            )
          }).then(({ data }) => {
            this.dialogAuditVisible = false
            this.$message({
              message: this.$i18n.t('publics.operation'),
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.getDataList(this.page)
              }
            })
          })
        }).catch(() => { })
      },
      ultraGroupRecord (row) {
        this.dialogRecordVisible = true
        this.$http({
          url: this.$http.adornUrl('/admin/ultra/group/record/list'),
          method: 'get',
          params: this.$http.adornParams({
            applyId: row.id
          })
        }).then((data) => {
          if (data) {
            this.recordList = data.data
          }
        })
      },
      refreshChange () {},
      // 搜索
      searchChange () {
        this.getDataList(this.page)
      },
      // 重置
      resetSearchForm () {
        this.searchParam = {}
        this.getDataList()
      },
      handleSizeChange (val) {
        this.page.pageSize = val
        this.getDataList(this.page)
      },
      handleCurrentChange (val) {
        this.page.currentPage = val
        this.getDataList(this.page)
      }
    }
  }
</script>
